<template>
	<view>
		<!-- 自定义导航栏 -->
		<view class="navBarBox">
			<!-- 状态栏占位 -->
			<view class="statusBar" :style="{ paddingTop: statusBarHeight + 'px' }"></view>
			<!-- 真正的导航栏内容 -->
			<view class="navBar">
				<view class="goback">
					<view @click="goBack" class="goicon" style="background:url(../../static/goback.png);background-size:contain;background-repeat: no-repeat;">
					</view>
				</view>
				<view class="title">邀约课程</view>
				<view class="right">
				</view>
			</view>
		</view>
		<!-- 页面内容 -->
		<view class="page">
			<view class="contlist" v-for="(item,index) in classmesg" :key="item.id" @click="goCorseDetail(item)">
				<view class="contlist">
					<view class="contlisttcont">
						<image :src="item.courseCover" mode="aspectFit"></image>
						<view class="listtit">
							<view class="listtittop">
								<text>{{item.courseName}}</text>
								<view class="listnum">
									<text>{{item.num}}/</text>
									<text>{{item.maxPersonNum}}</text>
								</view>
							</view>

							<view class="listicons">
								<view class="listiconss">
									<view class="listaddress" style="background: url(../../static/img/parents/place.png); background-size: cover;">
									</view>
									<view class="">
										{{item.applyOrgName}}-{{item.placeName}}
									</view>
								</view>
								<view class="listiconss">
									<view class="listaddress" style="background: url(../../static/img/parents/place.png); background-size: cover;">
									</view>
									<view class="listtime">
										周一下午16:00-17:00 周二下午17:00-18:00
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class=" contbutton">
						<button v-if="item.status== 1 && item.flag==0" @click="courseSett(item)" class="agree">同意报名</button>
						<!-- <button v-else-if="item.status== 1 && id==item.applyOrgId"  class="agree">邀约中</button> -->
						<!-- <button v-else-if="item.status== 0 && item.flag==2" class="opening">报名中</button> -->
						<button v-else-if="item.status== 2 && item.flag==0  && item.num<item.minPersonNum" class="opening">报名中</button>
						<button v-else-if="item.status == 2 && item.flag==1  && item.minPersonNum<= item.num  && item.num<=item.maxPersonNum"
						 @click="chooseTeacher(item)" class="openclass">开班</button>
						<button v-else-if="item.status == 2 && item.minPersonNum<item.num  && item.num<=item.maxPersonNum && id!==item.applyOrgId"
						 class="openclass">报名中</button>
						<button v-else-if="item.status ==3" class="opened">已开班</button>
					</view>

				</view>
			</view>
			<!-- <view class="" v-for="(item,index) in classmesg" :key="item.id">
				<text>邀约课程的id：{{item.inviteSchoolId}}  </text>
				<text>申报课程的 id：{{item.applyOrgId}} </text>
				<text>状态：{{item.status}} </text>
				<text>数量：{{item.num}} </text>
				<text>最小报名：{{item.minPersonNum}} </text>
				<text>最大 报名：{{item.maxPersonNum}} </text>
			</view> -->
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				// User:null,
				// ids:4,
				id: null,
				//当前登录用户的id
				classmesg: [], //邀约课程列表页数据
				statusBarHeight: 0, // 状态栏高度
				navBarHeight: 82 + 11, // 导航栏高度
			};
		},
		props: {

		},
		//第一次加载时调用
		created() {
			//获取手机状态栏高度
			this.statusBarHeight = uni.getSystemInfoSync()['statusBarHeight'];
			// this.User=uni.getStorageSync('schAdminConfirmData')

		},
		methods: {
			// 去开班-选择老师
			chooseTeacher(item) {
				uni.navigateTo({
					url: '../teachmanag/chooseTeacher?item=' + encodeURIComponent(JSON.stringify(item))
				});
			},
			// 返回上一页
			goBack() {
				// 此处是写返回页面的方法、

				uni.navigateBack({
					delta: 1 //返回只上一级页面
				});
			},
			//去课程详情页
			goCorseDetail(item) {
				uni.navigateTo({
					url: '../parentpages/coursePage/courseDetail?item=' + encodeURIComponent(JSON.stringify(item))
				})
			},
			// 去课程设置页
			courseSett(item) {
				console.log('传递的数据', item);
				uni.navigateTo({
					url: './courseInviteSett?item=' + encodeURIComponent(JSON.stringify(item))
				});
			},

			// 数据列表渲染
			showDataList() {
				this.$myRequest({
					url: '/admin/course/appointCourseEnter/' + this.id,

					success: (res) => {
						this.classmesg = res.data.data
						console.log(this.classmesg, '数组')
					},
					fail: (err) => {
						console.log(err)
						console.log('获取数据中')
					}
				})
			}
		},
		// 初次加载时

		onLoad(option) {
			// console.log(option.id,'接到的值')
			this.id = option.id
			this.showDataList()
		}
	}
</script>

<style>
	.page {
		width: 100%;
		height: 100%;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		align-content: flex-start;
		background-color: #fafafa;
	}

	.navBarBox {}

	.navBarBox .statusBar {}

	.navBarBox .navBar {
		padding: 3rpx 50rpx;
		padding-bottom: 8rpx;
		display: flex;
		justify-content: space-between;

		line-height: 93rpx;
		font-size: 40rpx;
	}

	.goback {
		flex: 1;
		height: 100%;
	}

	.goicon {
		width: 30rpx;
		height: 30rpx;
		background-color: #00BEA9;
		margin-top: 30rpx;
	}

	.title {
		flex: 1;
		height: 100%;

	}

	.right {
		flex: 1;
	}

	.contlist {
		width: 700rpx;
		height: 260rpx;
		background-color: #FFFFFF;
		margin-top: 20rpx;
		display: flex;
		flex-wrap: wrap;
		justify-content: space-around;
		border-radius: 10rpx;
	}

	.contlisttcont {
		width: 630rpx;
		/* background-color: #DD524D; */
		display: flex;
		justify-content: space-around;
		align-items: center;
	}

	.contlisttcont image {
		width: 170rpx;
		height: 150rpx;
		border-radius: 10rpx;
	}

	.listaddress {
		width: 20rpx;
		height: 20rpx;
	}

	.listtit {
		width: 460rpx;
		height: 150rpx;
		display: flex;
		flex-wrap: wrap;
		/* background-color: #46F1DE; */
		margin-left: 20rpx;
		padding-left: 6rpx;
	}

	.listtittop {
		width: 100%;
		display: flex;
		justify-content: space-between;
	}

	.listnum {
		color: #ffaa7f
	}

	.listtit:first-child {
		font-size: 32rpx;
		color: rgb(60, 60, 60);
	}

	.listicons {
		width: 450rpx;
		display: flex;
		flex-wrap: wrap;
		align-items: flex-start;
		font-size: 18rpx;
		/* background-color: #3F536E; */
	}

	.listiconss {
		width: 450rpx;
		height: 30rpx;
		display: flex;
		justify-content: flex-start;
		color: rgb(179, 179, 179);
		font-size: 22rpx;
	}

	.listaddress:first-child {
		margin-right: 4rpx;
	}

	.contbutton {
		width: 630rpx;
		/* background-color: #ffaaff; */

		display: flex;
		align-items: center;
		justify-content: flex-end;
	}

	.contbutton button {
		height: 50rpx;
		border-radius: 10rpx;
		color: #FFFFFF;

		font-size: 30rpx;
		text-align: center;
		margin: 0;
		line-height: 50rpx;
		border: none;
	}

	.agree {
		background-color: #2db3fe;
	}

	.openclass {
		background-color: #00bea9;
	}

	.opening {
		background-color: #ff6600;
	}

	.opened {
		background-color: #aaaaff;
	}
</style>
